<template>
	<view class="page">
		<view v-if='userInfo.is_admin&&token' class="BgImage" @click="jumpShop">
			<u-icon name="lock" color='#fff' size="40rpx"></u-icon>
		</view>
		<u--image v-if='profile.bg_image' :src="profile.bg_image" width="100%" height="600rpx"></u--image>
		<view v-else class="bg"></view>
		<view v-if='profile.bg_image' class="masking"></view>
		<view class="userBox">
			<view class="img" v-if='token&&userInfo.id'>
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
					style="height: 100rpx;width: 100rpx;"></button>
				<u-avatar mode='aspectFill' v-if="userInfo.is_set_avatar" :src="userInfo.avatar"
					size="100rpx"></u-avatar mode='aspectFill'>
				<view v-else>
					<u-icon name="camera" size="80rpx" color='#fff'></u-icon>
				</view>
			</view>
			<view v-else @click="Login">
				<u-avatar mode='aspectFill' :src="userInfo.avatar" size="100rpx"></u-avatar mode='aspectFill'>
			</view>
			<div style="width: 50vw;">
				<view v-if="token&&userInfo.id"
					style="display: flex;height: 100rpx;font-size: 26rpx;flex-direction: column;margin-left: 40rpx;">
					<view style="display: flex;">
						<view style="max-width: 100%;margin-right: 10rpx;">
							<input style="color: #fff;" type="nickname" v-model="nick_name" @blur='nameBlur'
								@change='change' />
						</view>
					</view>
					<text style="color: #fff;"
						v-if="(!userInfo.is_set_avatar||!userInfo.is_set_nickname)&&token">设置{{!userInfo.is_set_avatar?'头像':''}}{{!userInfo.is_set_nickname?'昵称':''}}获取更多关注</text>
					<template>
						<view class='uuidBox' @click="copy" v-if="token&&userInfo.id" >
							uuid：{{ userInfo.uuid}}<view class="iconfont icon-fuzhi"></view>
						</view>
						<view class='uuidBox' v-if="token&&userInfo.id" @click="jumpAccount">余额：￥{{ userInfo.account}}
						</view>
					</template>
				</view>
				<text class="userName" @click="Login" v-else>点击登录/注册</text>
			</div>
		</view>
		<view class="info" v-if='token&&userInfo.id'>
			<view @click="jumpfollowing">
				<view>{{userInfo.following_count?userInfo.following_count:0}}</view>
				<view>关注</view>
			</view>
			<view @click="jumpfollower">
				<view>{{userInfo.follower_count?userInfo.follower_count:0}}</view>
				<view>粉丝</view>
			</view>
			<view style="flex:1"></view>
			<view style="margin-right: 60rpx;
    display: flex;
    flex-direction: revert;
    align-items: center;">
				<view style="position: static;margin-right:20rpx ;" class="BgImage" @click="jumpEdit">
					<u-icon name="edit-pen" color='#fff' size="40rpx"></u-icon>
				</view>
				<view style="position: static;" class="BgImage" @click="jumpMessge">
					<u-icon name="email-fill" color='#fff' size="40rpx"></u-icon>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="content">
			<view class="acea-row row-column">
				<u-divider text="我的订单" textPosition="left"></u-divider>
				<view class="orderBox">
					<u-grid :border="false" col="5">
						<u-grid-item v-for="(item, listIndex) in orderList" :key="listIndex"
							@click="jumpOrder( listIndex)">
							<text :class="item.icon" style="font-size: 60rpx;margin-bottom: 10rpx;"></text>
							<text class="grid-text">{{ item.title }}</text>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			<u-divider text="功能" textPosition="left"></u-divider>
			<u-grid :border="false" col="5">
				<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex" @click="clickGrid">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" size="50rpx"
						:label="listItem.title" labelPos='bottom' space='16rpx' labelSize='26rpx'></u-icon>
				</u-grid-item>
			</u-grid>
			<u-divider text="心愿" textPosition="left"></u-divider>
			<u-grid :border="false" col="5">
				<u-grid-item v-for="(listItem,listIndex) in list2" :key="listIndex" @click="clickGrid2">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" size="50rpx"
						:label="listItem.title" labelPos='bottom' space='16rpx' labelSize='26rpx'></u-icon>
				</u-grid-item>
			</u-grid>
			<view v-if='token' class="loginOut"><u-button type="primary" v-if="token" text="退出登录"
					@click="loginOut"></u-button></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList: [{
						icon: 'iconfont icon-qianbao',
						title: '全部'
					},
					{
						icon: 'iconfont icon-yiquxiao1',
						title: '未支付'
					},
					{
						icon: 'iconfont icon-zhifu',
						title: '未发货'
					},
					{
						icon: 'iconfont icon-yizhifu1',
						title: '已发货'
					},
					{
						icon: 'iconfont icon-yiquxiao2',
						title: '已取消'
					},
				],
				list: [{
						name: 'hourglass',
						title: '减重'
					},
					{
						name: 'map',
						title: '我的小区'
					},
					{
						name: 'plus-people-fill',
						title: '亲友'
					},
					{
						name: 'heart',
						title: '我的跑步'
					},
					{
						name: 'red-packet',
						title: '充值记录'
					},
					{
						name: 'red-packet',
						title: '红包'
					},

					{
						name: 'map',
						title: '收货地址'
					},
					{
						name: 'calendar',
						title: '我的计划'
					},
				],
				list2: [{
						name: 'home',
						title: '我的家庭'
					}, {
						name: 'gift',
						title: '心愿'
					},
					{
						name: 'attach',
						title: '积分项'
					},
					{
						name: 'photo',
						title: '成长记录'
					},
					{
						name: 'gift',
						title: '达成心愿'
					}
				],
				userInfo: {},
				profile: {},
				loginCode: null,
				nick_name: '',
				token: '',
			}
		},
		mounted() {
			if (uni.getStorageSync('token')) {
				this.$api.My.Detail().then(my => {
					if (this.token) {
						uni.setStorageSync('user', my.data);
						this.userInfo = uni.getStorageSync('user')
						this.nick_name = uni.getStorageSync('user')?.nick_name
						this.profile = uni.getStorageSync('user')?.profile ? uni.getStorageSync('user')?.profile :
						{}
					}
				});
			}
			this.userInfo = uni.getStorageSync('user')
			this.nick_name = uni.getStorageSync('user')?.nick_name
			this.profile = uni.getStorageSync('user')?.profile ? uni.getStorageSync('user')?.profile : {}
			this.token = uni.getStorageSync('token')
		},
		methods: {
			jumpEdit(){
				if (!this.token) {
					this.$utils.judgeToken()
					return
				}
				this.$utils.navigateTo({
					url:'/edit/index'
				})
			},
			copy() {
				uni.setClipboardData({
					data: this.userInfo.uuid, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.$u.toast('已复制到粘贴板')
					}
				});
			},
			jumpShop() {
				if (!this.token) {
					this.$utils.judgeToken()
					return
				}
				this.$utils.navigateTo({
					url: '/shop/index'
				})
			},
			jumpOrder(id) {
				if (!this.token) {
					this.$utils.judgeToken()
					return
				}
				this.$utils.navigateTo({
					url: '/indent/idnex?id=' + id
				})
			},
			jumpAccount() {
				if (!this.token) {
					this.$utils.judgeToken()
					return
				}
				this.$utils.navigateTo({
					url: '/My/balance'
				})
			},
			jumpMessge() {
				if (!this.token) {
					this.$utils.judgeToken()
					return
				}
				this.$utils.navigateTo({
					url: "/My/myMessge"
				})
			},
			jumpfollowing() {
				if (!this.token) {
					this.$utils.judgeToken()
					return
				}
				this.$utils.navigateTo({
					url: '/following/following'
				})
			},
			jumpfollower() {
				if (!this.token) {
					this.$utils.judgeToken()
					return
				}
				this.$utils.navigateTo({
					url: '/follower/follower'
				})
			},
			// changeimage() {
			// 	uni.chooseImage({
			// 		count: 1,
			// 		success: (res) => {
			// 			res.tempFilePaths.forEach((item, index) => {
			// 				console.log(item)
			// 				this.profile.bg_image = item
			// 				uni.setStorageSync('user', {
			// 					...this.userInfo,
			// 					profile: this.profile
			// 				});
			// 				res.tempFilePaths.forEach((item, index) => {
			// 					uni.uploadFile({
			// 						url: this.$config.url +
			// 							'/api/my/detail/bg/upload', //仅为示例，非真实的接口地址
			// 						filePath: item,
			// 						name: 'file',
			// 						header: {
			// 							'Content-Type': 'application/json;charset=UTF-8',
			// 							'Authorization': "Bearer " + uni
			// 								.getStorageSync('token')
			// 						},
			// 					});

			// 				});
			// 			});
			// 		},
			// 		fail: () => {

			// 		}
			// 	})
			// },
			clickGrid2(e) {
				if (!this.token) {
					this.$utils.judgeToken()
					return
				}
				if (e == 1) {
					this.$utils.navigateTo({
						url: '/My/wish'
					})
				} else if (e == 2) {
					this.$utils.navigateTo({
						url: '/My/point'
					})
				} else if (e == 3) {
					this.$utils.navigateTo({
						url: '/My/fragment'
					})
				} else if (e == 0) {
					this.$utils.navigateTo({
						url: '/My/home'
					})
				} else if (e == 4) {
					this.$utils.navigateTo({
						url: '/My/fulfill'
					})
				}
			},
			clickGrid(e) {
				if (!this.token) {
					this.$utils.judgeToken()
					return
				}
				if (e == 0) {
					this.$utils.navigateTo({
						url: '/My/conquer'
					})
				} else if (e == 1) {
					this.$utils.navigateTo({
						url: '/My/district'
					})
				} else if (e == 2) {
					this.$utils.navigateTo({
						url: '/My/relative'
					})
				} else if (e == 3) {
					this.$utils.navigateTo({
						url: '/run/index'
					})
				} else if (e == 4) {
					this.$utils.navigateTo({
						url: '/My/balance'
					})
				} else if (e == 5) {
					uni.reLaunch({
						url: '/My/blessing'
					})
				} else if (e == 6) {
					this.$utils.navigateTo({
						url: "/address/AddressBookPage/AddressBookPage"
					})
				} else if (e == 7) {
					this.$utils.navigateTo({
						url: '/My/plan'
					})
				}
			},
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail;
				console.log(avatarUrl)
				uni.uploadFile({
					url: this.$config.url + '/api/my/detail/avatar/upload', // 仅为示例，非真实的接口地址
					filePath: avatarUrl,
					name: 'file',
					header: {
						'Content-Type': 'application/json;charset=UTF-8',
						'Authorization': "Bearer " + this.token
					},
				});
				uni.setStorageSync('user', {
					...this.userInfo,
					avatar: avatarUrl,
					is_set_avatar: 1
				});
				this.userInfo = {
					...this.userInfo,
					avatar: avatarUrl,
					is_set_avatar: 1
				}
			},
			Login() {
				this.$utils.navigateTo({
					url: '/Login/loginPage'
				})
			},
			loginOut() {
				uni.removeStorageSync('user');
				uni.removeStorageSync('token');
				this.userInfo = {}
				this.profile = {}
				this.token = null
			},

			change(e) {
				this.nick_name = e.detail.value
			},
			nameBlur() {
				uni.setStorageSync('user', {
					...this.userInfo,
					nick_name: this.nick_name,
					is_set_nickname: 1
				});
				this.userInfo = {
					...this.userInfo,
					nick_name: this.nick_name,
					is_set_nickname: 1
				}
				setTimeout(() => {
					this.$api.Edit.Nickname({
						nick_name: this.nick_name
					})
				}, 2000)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.loginOut {
		margin: auto;
		margin-top: 40rpx;
	}



	.typeTitle {
		font-size: 30rpx;
		display: flex;
		align-items: center;
		margin: 0 auto 20rpx;
		width: 100%;
		justify-content: space-between;

		&:before {
			content: '';
			background-color: #bfbfbf;
			flex: 0.3;
			height: 2rpx;
			display: inline-block;
			margin-right: 40rpx;
		}

		&:after {
			content: '';
			background-color: #bfbfbf;
			flex: 1;
			height: 2rpx;
			display: inline-block;
			margin-left: 40rpx;
		}
	}

	.page {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.bg {
		height: 600rpx;
		background: linear-gradient(to right, #2c4878, #314d7d, #173162);
	}

	.masking {
		background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0));
		position: absolute;
		width: 100%;
		top: 0;
		height: 600rpx;
	}

	.img {
		width: 100rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 100%;
		height: 100rpx;

		.avatar-wrapper {
			opacity: 0;
			position: absolute;
			z-index: 5;
			width: 180rpx;
			height: 180rpx;
		}
	}

	.userBox {
		position: absolute;
		top: 200rpx;
		left: 40rpx;
		display: flex;
	}

	.uuidBox {
		display: flex;
		color: #fff;
	}

	.userName {
		color: #fff;
		font-size: 30rpx;
		margin-left: 30rpx;
	}

	.blurb {
		color: #fff;
		font-size: 26rpx;
		font-weight: 400;
		position: absolute;
		top: 300rpx;
		left: 40rpx;
	}

	.label {
		margin-right: 20rpx;
		padding: 5rpx 10rpx;
		color: #fff;
		background-color: rgba($color: #fff, $alpha: 0.3);
		font-weight: 600;
		border-radius: 50rpx;
	}

	.tag {
		display: flex;
		font-size: 26rpx;
		font-weight: 400;
		position: absolute;
		top: 360rpx;
		left: 40rpx;

	}

	.content {
		width: 100%;
		background-color: #fff;
		border-radius: 18rpx 18rpx 0 0;
		position: relative;
		top: -84rpx;
		box-sizing: border-box;
		padding: 20rpx 60rpx 10rpx;
		height: calc(100% - 600rpx + 84rpx);
	}

	.info {
		align-items: center;
		display: flex;
		font-size: 26rpx;
		position: absolute;
		width: 100%;
		top: 430rpx;
		height: 78rpx;
		left: 40rpx;

		>view {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			color: #fff;
			margin-right: 40rpx;
			text-align: center;
		}

	}

	.BgImage {
		background: rgba(0, 0, 0, 0.3);
		color: #fff;
		position: fixed;
		display: flex;
		top: 200rpx;
		right: 40rpx;
		align-items: center;
		z-index: 11;
		justify-content: center;
		border-radius: 100%;
		width: 80rpx;
		height: 80rpx;
	}
</style>